<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Methods Option 方法选项</title>
</head>

<body>
    <h1>Methods Option 方法选项</h1>
    <hr>
    <div id="app">
        <p>{{a}}</p>
        <button @click="add(2,$event)">Add</button>
        <p><btn @click.native="add(2,$event)"></btn></p> 
    </div>
    <button onclick="app.add(3)">外部Add</button>
    <script type="text/javascript">
        var btn = {
            template:`<button>组件Add</button>`
        }
        var app = new Vue({
            el: '#app',
            data: {
                a: 1
            },
            components:{
                "btn":btn
            },
            methods:{
                add:function(num){
                    if(num!=''){
                        this.a+=num// a+=num 等同于 a = a+num
                    }else{
                        this.a++
                    }              
                }
            }
        })
    </script>
</body>

</html>